<template>
  <view class=" tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    
    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="tn-margin">
        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-aquablue">
          <view class="tn-margin-left tn-margin-top-lg">
			  <view class="tn-color-white tn-text-xl">
			    您的贷款额度
			  </view>
            <view class="tn-color-white tn-padding-top tn-text-center">
              <text class="tn-icon-money tn-padding-right-sm" style="font-size: 60rpx;margin-left: -10rpx;"></text>
              <text class="tn-text-bold" style="font-size: 80rpx;">{{formatPrice(this.totalAmount)}}</text>
            </view>
            <view class="tn-color-white tn-text-sm" style="padding-top: 65rpx;opacity: 0.6;">额度为所有抵押货物贷款额度总和</view>
          </view>
        </view>
      </view>
    
	 <block v-for="(item, index) in history" :key="index">
	   <view class="article-shadow tn-margin" @click="tn(`/goods/good_detail?id=${item.goodsId}`)">
	     <view class="tn-flex">
<!-- 	       <view class="image-pic tn-margin-sm" :style="'background-image:url(https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg)'">
	         <view class="image-article">
	         </view>
	       </view> -->
	       <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
	         <view class="tn-text-lg tn-text-bold clamp-text-1">
	           {{item.goodsName}}
	         </view>
	         <view class="tn-padding-top-xs tn-flex-direction-column tn-flex-wrap" style="min-height: 120rpx;">
	           <view class="tn-text-sm tn-color-black clamp-text-2">
	             编号：{{item.goodsNo}}
	           </view>
			   <view class="tn-text-sm tn-color-black clamp-text-2">
	             数量：{{item.goodsNum}}
	           </view>
			   <view class="tn-text-sm tn-padding-top-sm  tn-color-black clamp-text-2">
			     授信额度：<text class="tn-text-lg tn-color-bluepurple tn-text-bold">{{formatPrice(item.amount)}}</text>
			   </view>
	         </view>
	         <view class="tn-flex-direction-column tn-flex-wrap">
	           <view class="justify-content-item tn-color-black tn-text-left tn-color-gray--disabled" >
	             <text class="tn-icon-time tn-padding-right-xs"></text>
	             <text class="tn-padding-right">{{item.createTime}}</text>
	           </view>
			   <view class="tn-padding-top-sm" style="pointer-events: none;">
			   	<tn-steps :list="list" :current="status(item.approvalId)" activeColor="#24F083" inActiveColor="#8B7E66"></tn-steps>
			   </view>
	         </view>
	       </view>
	     </view>
	   </view>
	 </block>
	 <view class='tn-tabbar-height'></view>
    </view>
    
    

    <!-- 悬浮按钮-->
    <view class="tn-flex tn-footerfixed" @click="eva()">
      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
        <tn-button backgroundColor="#4327DF" padding="40rpx 0" shape="round" width="80%">
          <text class="tn-color-white">立即评估</text>
        </tn-button>
      </view>
    </view>
    
  </view>
</template>

<script>
  import {history} from '@/api/loan.js'
  import {getUserStatus} from '@/api/auth.js'
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplatePay',
    mixins: [template_page_mixin],
    data(){
      return {
		  history:[],
		  totalAmount:0,
		  list: [{
		          name: '申请'
		        },
				{
				  name: '系统审批',
				},
				{
				  name: '授信成功',
				}
		    ]
      }
    },
	created() {
		this.getHistory();
	},
    methods: {
	  getHistory(){
		history().then(res=>{
			this.history=res
			this.history.forEach(it=>{
				this.totalAmount = this.totalAmount + it.amount
			})
		}).catch(err=>{
			this.history=[]
		})  
	  },
	  formatPrice(price) {
	    return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	  },
	  status(approvalId){
		  console.log(approvalId)
		  if(approvalId!=null){
			  return 3
		  }else{
			  return 2
		  }
	  },
	  eva(){
		  getUserStatus().then(res=>{
			  if(res.realName==false){
				  this.$t.message.toast('请先实名认证')
			  }else if(res.realEnterprise==false){
				  this.$t.message.toast('请先认证公司')
			  }else if(res.haveGoodsInstore==false){
				  this.$t.message.toast('请先添加货物并入库')
			  }else{
				 this.tn('/money/apply_amount')
			  }
		  })
		  
	  },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  .template-pay{
    height: 100vh;
    background-color: #161324;
  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(60rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
  /* 卡 */
  .button-vip {
    width: 100%;
    height: 300rpx;
    border-radius: 15rpx;
    position: relative;
    z-index: 1;
    
    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
    }    
  }
  
  .tag-select{
    width: 31%;
    border: 4rpx solid #4327DF;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #211E2F50;
  }
  .tag-select-no{
    width: 31%;
    border: 4rpx solid #211E2F;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #211E2F;
  }

  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 240rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  
  /* 资讯主图 start*/
  .image-article {
    border-radius: 8rpx;
    border: 1rpx solid #F8F7F8;
    width: 200rpx;
    height: 200rpx;
    position: relative;
  }
  
  .image-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }
</style>
